@use '../components/util';

@mixin ios-text-input {
	appearance: none;
	background-color: var(--last-fm-bg);
	border-radius: 0.25em;
	box-sizing: border-box;
	color: var(--text);
	font-size: 1.2em;
	padding: 0.25em 0.5em;
}

.alertPopup,
.widePopup {
	padding: 15px;
	text-align: center;

	p,
	ul {
		text-align: left;
	}
}

.alertPopup {
	width: 300px;
}

.widePopup {
	width: 400px;
}

.bigIcon:not(table) {
	font-size: 64px;
}

body {
	background-color: var(--background);
	color: var(--text);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

a {
	color: var(--last-fm);
	text-decoration: none;

	&.notRedAnchor {
		color: var(--text);
	}
}

.alreadyPlaying {
	summary {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: 0.5em;
		width: 100%;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.expandVector {
		transition: transform 0.2s ease-in-out;
	}

	&[open] {
		.expandVector {
			transform: rotate(-180deg);
		}
	}
}

.nowPlayingPopup {
	background-color: transparent;
	display: flex;
	overflow: hidden;
	width: max-content;

	.coverArtWrapper {
		// set a very low height here. This prevents image from expanding uncontrollably.
		// The entire image still remains clickable link (overflow).
		height: 10px;

		.coverArtBackground {
			background-size: cover;

			.coverArt {
				aspect-ratio: 1 / 1;
				backdrop-filter: blur(5px);
				object-fit: contain;
				width: 100vh;
			}
		}
	}

	.songDetails {
		display: flex;
		flex-direction: column;
		gap: 0.25em;
		max-width: 50ch;
		min-width: 30ch;
		overflow: hidden;
		padding: 0.5em 1em;
		text-overflow: ellipsis;
		white-space: nowrap;

		a {
			white-space: nowrap;
			width: fit-content;
		}

		.editField {
			border: 1px solid var(--text);
			border-radius: 3px;
			padding: 0.15em 0.25em;
		}
	}

	.playDetails {
		display: flex;
		gap: 0.5em;
	}

	.playCount {
		align-items: center;
		display: flex;
		gap: 0.25em;

		svg {
			fill: var(--active-text);
			height: 1.2em;
			width: 1.2em;
		}
	}

	.label {
		background-color: var(--last-fm);
		border-radius: 0.25em;
		color: var(--active-text);
		padding: 0.25em 0.5em;
	}

	.controlButtons {
		display: flex;
		margin-top: 0.5em;

		.controlButton {
			--icon-color: var(--text);
			background-color: transparent;
			border: var(--interactable-border);
			color: var(--icon-color);
			cursor: pointer;
			padding: 0.25em 0.5em;

			.applyFill {
				fill: var(--icon-color);
			}

			&:hover,
			&.active {
				--icon-color: var(--last-fm);
			}

			&:not(:hover) .hover {
				display: none;
			}

			&:hover .nonHover {
				display: none;
			}

			&[disabled] {
				cursor: not-allowed;

				&:not(.hiddenDisabled) {
					--icon-color: var(--checkbox-inactive);
				}
			}
		}
	}
}

.bold {
	font-weight: bold;
}

.settingsIcon {
	bottom: 0.75em;
	color: var(--text);
	position: absolute;
	right: 0.75em;

	&:hover,
	&:active {
		color: var(--last-fm);
	}
}

.regexContainer {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 1em;
	width: 800px;

	--max-cell-width: 1fr;

	.entryWrapper {
		align-items: center;
		display: grid;
		gap: 1em;
		grid-template: 2em / var(--max-cell-width) 1fr 1fr 1fr;
		width: 100%;
	}

	.entryLabel {
		justify-self: right;
		white-space: nowrap;
	}

	.regexFieldWrapper {
		align-self: center;
		position: relative;

		.regexFieldInput {
			box-sizing: border-box;
			width: 100%;
		}

		.regexFieldItem {
			position: absolute;
			right: 0.1em;
			top: 50%;
			transform: translateY(-50%);

			&.regexSuccess {
				color: var(--confirm);
			}

			&.regexFailure {
				color: var(--last-fm);
			}
		}
	}

	.editWarning {
		color: var(--last-fm);
	}

	input {
		border: 1px solid var(--text);
		border-radius: 3px;
		padding: 0.25em 0.5em;
	}

	.regexFooter {
		display: flex;
		flex-direction: column;
		width: 100%;

		.regexFooterButtons {
			display: flex;
			width: 100%;
		}
	}

	.regexFlagsWrapper {
		align-items: center;
		display: flex;
		margin: 0.5em 0;

		span {
			font-size: 1.1em;
			margin-right: 0.5em;
		}
	}

	.regexToggleWrapper {
		align-items: center;
		border: 2px solid var(--interactable-border-color);
		cursor: pointer;
		display: flex;
		padding: 0.25em;
		width: max-content;

		&:has(.regexToggleInput:checked) {
			background-color: var(--last-fm);
			color: var(--active-text);
		}

		/**
		 * Check to make sure we are on desktop.
		 * If we aren't, we don't want any highlighting,
		 * as this will be confusing to the user.
		 */
		@supports not (#{util.$mobile-supports}) {
			&:hover,
			&:has(.regexToggleInput:focus-visible) {
				background-color: var(--last-fm);
				color: var(--active-text);
			}

			&:hover:has(.regexToggleInput:checked),
			&:has(.regexToggleInput:focus-visible:checked) {
				background-color: var(--background);
				border: 2px solid var(--last-fm);
				color: var(--text);
			}
		}

		.regexToggleInput {
			-webkit-appearance: none;
			appearance: none;
			border: none;
			margin: 0;
			padding: 0;
			width: 0;
		}
	}

	.button {
		align-items: center;
		background-color: var(--always-last-fm);
		border: var(--interactable-border);
		border-radius: 3px;
		color: var(--always-light);
		cursor: pointer;
		display: flex;
		font-size: 1em;
		margin-right: -0.1em;
		padding: 1px 7px 2px;
		white-space: nowrap;
		width: min-content;

		&:hover {
			background-color: var(--always-last-fm-hover);
			color: var(--active-text);
		}
	}
}

@supports #{util.$mobile-supports} {
	.root {
		display: flex;
		flex-direction: column-reverse;
		// stylelint-disable-next-line unit-no-unknown
		height: 100dvh;
		width: 100vw;
	}

	.nowPlayingPopup,
	.alertPopup,
	.widePopup {
		align-items: center;
		box-sizing: border-box;
		flex: 1 1 auto;
		flex-direction: column;
		margin: 0 auto;
		overflow: auto;
		overflow-y: auto;
		padding-bottom: 1.5em;
		width: 100%;
	}

	.nowPlayingPopup {
		.coverArtWrapper {
			filter: drop-shadow(0 0.25em 0.5em var(--text));
			flex: 0 0 auto;
			height: min(30vh, 30vw);
			margin: 1em 0;
			position: relative;

			&::after {
				background-color: var(--background);
				clip-path: url('#coverArtClip');
				content: '';
				inset: 0;
				position: absolute;
				z-index: -100;
			}

			.coverArtBackground {
				clip-path: url('#coverArtClip');
				display: inline-block;
			}

			.coverArt,
			.coverArtBackground {
				max-height: min(30vh, 30vw);
				max-width: min(30vh, 30vw);
			}

			.coverArt {
				background-color: rgb(0 0 0 / 50%);
			}
		}

		.songDetails {
			align-items: center;

			.editField {
				border: var(--interactable-border);

				@include ios-text-input;
			}
		}

		.iosLoveButton {
			background-color: transparent;
			border: var(--interactable-border);
			color: var(--text);
			cursor: pointer;
			padding: 0.25em 0.5em;

			&.active {
				color: var(--last-fm);
			}

			svg {
				height: 2em;
				width: 2em;
			}
		}
	}

	.regexContainer {
		align-items: center;
		display: flex;
		flex-direction: column;
		width: 70%;

		.iosSearchLabel,
		.iosReplaceLabel,
		.iosPreviewLabel {
			margin-top: 0.5em;
		}

		input {
			border: var(--interactable-border);
			width: 100%;

			@include ios-text-input;
		}

		.entryWrapper {
			align-items: center;
			border: 1px solid var(--last-fm-bg);
			border-radius: 1em;
			display: flex;
			flex-direction: column;
			gap: 0;

			.entryWrapperLegend {
				padding: 0 1em;
			}
		}

		.regexFieldWrapper {
			align-items: center;
			display: flex;
			flex-direction: column;
			padding: 0.25em 0.5em;
			width: 100%;

			.regexFieldItem {
				bottom: -0.3em; // I have no idea why this works - and I honestly don't want to know either
				top: auto;

				&.button {
					bottom: -0.6em;
				}
			}
		}

		.regexFlagsWrapper {
			flex-direction: column;

			.regexToggleWrapper {
				gap: 0.25em;
				width: 100%;
			}
		}
	}
}
